<template>
    <div>
        <el-form-item :label="$t('亮度')">
            <div class="set_item">
                <el-slider v-model="editorForm.brightness" :min="0" :max="100" :marks="brightnessMarks" style="width:280px" @change="handleChangeVal"></el-slider>
                <el-button type="primary" size="small" @click="resetFormData(1)">重置</el-button>
                <el-button type="primary" size="small" @click="setPlayAttr('brightness')">时间段</el-button>
            </div>
        </el-form-item>
        <el-form-item :label="$t('音量')">
            <div class="set_item">
                <el-slider v-model="editorForm.volumn" :min="0" :max="100" :marks="volumnMarks" style="width:280px" @change="handleChangeVal"></el-slider>
                <el-button type="primary" size="small" @click="resetFormData(2)">重置</el-button>
                <el-button type="primary" size="small" @click="setPlayAttr('volumn')">时间段</el-button>
            </div>
        </el-form-item>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item :label="$t('相位调整')">
                    <el-checkbox v-model="phase" label="自动调整" @change="handelChangeCheckBox($event, 1)"></el-checkbox>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item :label="$t('ADC矫正')">
                    <el-checkbox v-model="check" label="自动调整" @change="handelChangeCheckBox($event, 2)"></el-checkbox>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="屏幕布局">
            <el-radio-group v-model="editorForm.layout" @change="handleChangeVal">
                <el-radio :label="0">全屏</el-radio>
                <el-radio :label="1">上半屏</el-radio>
                <el-radio :label="2">下半屏</el-radio>
            </el-radio-group>
        </el-form-item>

        <play-attr-dialog :visible.sync="showPlayAttrDialog" :initPlayAttrData="initPlayAttrData" :type="setType" @save="handleSetPlayAttrInfo"></play-attr-dialog>
    </div>
</template>

<script>
import PlayAttrDialog from '../../../device/device-info/components/PlayAttrDialog.vue'
export default {
    components: {
        PlayAttrDialog
    },
    data() {
        return {
            brightnessMarks: {
                0: '0',
                50: '50',
                100: '100'
            },
            volumnMarks: {
                0: '0',
                50: '50',
                100: '100'
            },
            phase: false,
            check: false,
            showPlayAttrDialog: false,
            initPlayAttrData: [],
            setType: 'brightness'
        }
    },
    props: {
        editorForm: {
            type: Object,
            default() {
                return {}
            }
        },
        activeName: {
            type: String,
            default: 'first'
        }
    },
    watch: {
        editorForm: {
            handler(val) {
                this.phase = val.phase ? val.phase : false
                this.check = val.check ? val.check : false
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        handleChangeVal() {
            this.$emit('edit')
        },
        handelChangeCheckBox(val, type) {
            if(type === 1) {
                this.editorForm.phase = val
            } else if(type === 2) {
                this.editorForm.check = val
            }
            this.handleChangeVal()
        },
        setPlayAttr(type) {
            this.setType = type
            if(this.activeName === 'first') {
                if(type == 'brightness') {
                    this.initPlayAttrData = this.editorForm.brightnessList || []
                } else {
                    this.initPlayAttrData = this.editorForm.volumesList || []
                }
            } else if(this.activeName === 'second') {
                if(type == 'brightness') {
                    this.initPlayAttrData = this.editorForm.brightnessList || []
                } else {
                    this.initPlayAttrData = this.editorForm.volumesList || []
                }
            } else if(this.activeName === 'thread') {
                if(type == 'brightness') {
                    this.initPlayAttrData = this.editorForm.brightnessList || []
                } else {
                    this.initPlayAttrData = this.editorForm.volumesList || []
                }
            } else if(this.activeName === 'four') {
                if(type == 'brightness') {
                    this.initPlayAttrData = this.editorForm.brightnessList || []
                } else {
                    this.initPlayAttrData = this.editorForm.volumesList || []
                }
            } else if(this.activeName === 'five') {
                if(type == 'brightness') {
                    this.initPlayAttrData = this.editorForm.brightnessList || []
                } else {
                    this.initPlayAttrData = this.editorForm.volumesList || []
                }
            }
            console.log(this.initPlayAttrData, '================================', this.editorForm)
            this.showPlayAttrDialog = true
        },
        handleSetPlayAttrInfo(data, type) {
            this.$emit('set', data, type)
        },
        resetFormData(type) {
            this.$emit('reset', type)
        }
    }
}
</script>

<style lang="scss" scoped>
.set_item {
    display: flex;
    justify-content: space-between;
}
</style>